<template>
  <van-nav-bar :title="t('refund.ownerlessRegister')" left-arrow @click-left="onClickLeft" placeholder fixed />
  <van-cell :title="t('refund.ownerlessNo')" :value="query.returnNo" />
  <van-field :label="t('refund.locationCode')" name="locationCode" required label-align="top">
    <template #input>
      <van-field ref="locationRef" v-model="locationCode" :placeholder="t('refund.pleaseScanLocation')" clearable class="input-border">
        <template #left-icon>
          <van-icon name="enlarge" size="1.5rem" class="pr-2"/>
        </template>
      </van-field>
    </template>
  </van-field>
  <van-field :label="t('refund.photo')" required label-align="top">
    <template #input>
      <van-uploader v-model="fileList" multiple :max-count="5" />
    </template>
  </van-field>
  <van-field :label="t('refund.remark')" name="remark" label-align="top">
    <template #input>
      <van-field v-model="remark" clearable class="input-border" />
    </template>
  </van-field>
  <van-action-bar placeholder>
    <van-row class="w-full p-1">
      <van-col span="24">
        <van-button class="text-base" :loading="confirmLoading" block type="primary" @click="confirmOwnerless">{{ t('refund.ownerlessConfirm') }}</van-button>
      </van-col>
    </van-row>
  </van-action-bar>
  <van-back-top />
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest } from "@/api";
import { useRoute } from "vue-router";
import { AppToast } from "@/utils/appToast";

const query: any = useRoute().query;
const { t } = useI18n();
const onClickLeft = () => history.back();

const confirmLoading = ref(false);
const locationRef = ref();
const fileList = ref([]);
const locationCode = ref();
const remark = ref();

const confirmOwnerless = () => {
  if (locationCode.value && fileList.value.length > 0) {
    confirmLoading.value = true
    const formData: FormData = new FormData()
    formData.set('returnNo', query.returnNo);
    formData.set('locationCode', locationCode.value);
    formData.set('remark', remark.value);
    formData.set("outerPackage",fileList.value[0]?.file);
    formData.set("label",fileList.value[1]?.file);
    formData.set('productPhoto1', fileList.value[2]?.file);
    formData.set('productPhoto2', fileList.value[3]?.file);
    formData.set('productPhoto3', fileList.value[4]?.file);
    postRequest("/noCustomer/noCustomer", formData).then(() => {
      AppToast(t("refund.uploadSuccess"), "success")
      history.back();
    }).finally(() => {
      confirmLoading.value = false
    })
  } else {
    AppToast(t("pleaseCheckRequired"), "danger", true);
  }
}
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}

:deep(.input-border) {
  border: 1px solid #e5e7eb;
}
</style>
